<template>
	<div class="common-layout">
		<el-container>
			<div class="banner">
				<BannerVue />
			</div>
			<el-main class="main-container-box">
				<el-row>
					<el-col :span="24" :md="24" :lg="24" :xs="24">
						<div class="main-container">
							<div class="btn-box">
								<BtnBar :currentIndex="null" :btnList="btnList"/>
							</div>

							<tipsContent />
							<div class="guess-box card-box">
								<div class="common-tit">
									<h3>你可能会喜欢这些作品</h3>
									<a href="">
										<el-button text>换一换<el-icon color="#ff8674">
												<Refresh />
											</el-icon></el-button>
									</a>
								</div>
								<BookSwiper />
							</div>

							<div class="new-works card-box">
								<div class="common-tit">
									<h3>最新作品</h3>
									<a href="/search">
										<el-button text>更多<el-icon color="#ff8674">
												<ArrowRight />
											</el-icon></el-button>
									</a>
								</div>
								<el-tabs v-model="activeName" class="demo-tabs">
									<el-tab-pane label="最新更新" name="first" />
									<el-tab-pane label="最新上架" name="second" />
									<el-tab-pane label="完结作品" name="third" />
								</el-tabs>
								<BookSwiper />
							</div>

							<!-- <div class="card-box">
								<div class="common-tit">
									<h3>独家 Kado Plus 系列日轻</h3>
									<a href="">
										<el-button text>了解更多<el-icon color="#ff8674">
												<ArrowRight />
											</el-icon></el-button>
									</a>
								</div>
								<BookSwiper />
							</div> -->




							<!-- <div class="card-box">
								<div class="common-tit">
									<h3>
										2025 KadoKado 百万小说创作大赏 - 重回创作起点，用文字创造新世界
									</h3>
									<a href="">
										<el-button text>更多<el-icon color="#ff8674">
												<ArrowRight />
											</el-icon></el-button>
									</a>
								</div>
								<BookList />
							</div> -->

							<!-- <div class="card-box">
								<div class="common-tit">
									<h3>华文原创</h3>
									<a href="">
										<el-button text>更多<el-icon color="#ff8674">
												<Refresh />
											</el-icon></el-button>
									</a>
								</div>
								<el-tabs v-model="activeName" class="demo-tabs">
									<el-tab-pane label="最新连载" name="first" />
									<el-tab-pane label="最新上架" name="second" />
									<el-tab-pane label="完结作品" name="third" />
								</el-tabs>
								<BookSwiper />
							</div> -->

							<!-- <div class="card-box">
								<div class="common-tit">
									<h3>近期赛事</h3>
									<a href="">
										<el-button text>换一换<el-icon color="#ff8674">
												<Refresh />
											</el-icon></el-button>
									</a>
								</div>
								<el-row :gutter="16" class="match">
									<el-col :span="12">
										<img src="../assets/images/match1.png" alt="" />
									</el-col>
									<el-col :span="12">
										<img src="../assets/images/match2.png" alt="" />
									</el-col>
								</el-row>
							</div> -->

							<!-- <div class="card-box">
								<div class="common-tit">
									<h3>读角券推荐作品</h3>
									<a href="">
										<el-button text>换一换<el-icon color="#ff8674">
												<Refresh />
											</el-icon></el-button>
									</a>
								</div>
								<BookSwiper />
							</div> -->

							<div class="card-box new-commit">
								<div class="common-tit">
									<h3>新鲜评论</h3>
									<a href="">
										<el-button text>换一换<el-icon color="#ff8674">
												<Refresh />
											</el-icon></el-button>
									</a>
								</div>

								<div class="mani-content-boss">
									<div class="mani-content dis-row" v-for="(item, index) in 3" :key="index">
										<div>
											<img src="https://img.kadokado.cn/insecure/s:80/plain/memberId/63410/profile/a933fa1badebbb89/blob"
												class="new-avg" alt="" />
										</div>
										<div>
											<div class="xinxian-right-title">毛尼那</div>
											<div class="hehtang-content">
												<div>謝謝荷糖月色的推薦～</div>
											</div>
											<div class="space-between hehuang-content">
												<div class="yuese-title">【荷糖月色的飲茶鋪】角角者書評活動</div>
												<div class="dis-row kanzuo-ping">
													<div>看作品</div>
													<div>
														<img src="@/assets/images/arrow-right-cheng.png"
															class="arrow-png" alt="" />
													</div>
												</div>
											</div>
										</div>


									</div>
								</div>
							</div>

							<div class="card-box">
								<div class="common-tit">
									<h3>热门排行</h3>
									<a href="/Charts">
										<el-button text>
											更多
											<el-icon><ArrowRight /></el-icon>
										</el-button>
									</a>
								</div>
								<el-tabs v-model="activeName" class="demo-tabs">
									<el-tab-pane label="日榜" name="first" />
									<el-tab-pane label="周榜" name="second" />
									<el-tab-pane label="月榜" name="third" />
									<!-- <el-tab-pane label="暢銷週榜" name="third" />
									<el-tab-pane label="收藏週榜" name="third" /> -->
								</el-tabs>
								<BookSwiper />
							</div>

							<!-- <div class="card-box">
								<div class="common-tit">
									<h3>编辑推荐</h3>
									<a href="">
										<el-button text>换一换<el-icon color="#ff8674">
												<Refresh />
											</el-icon></el-button>
									</a>
								</div>
								<BookList />
							</div> -->

							<!-- <div class="card-box">
								<div class="common-tit">
									<h3>独家日本连载小说</h3>
									<a href="">
										<el-button text>换一换<el-icon>
												<Refresh />
											</el-icon></el-button>
									</a>
								</div>
								<BookSwiper />
							</div> -->
						</div>
					</el-col>
				</el-row>





			</el-main>
			<el-footer>
				<ul>
					<li><a href="/tos">用户协议</a></li>
					<li><a href="/privacypolicy">隐私政策</a></li>
				</ul>
			</el-footer>
		</el-container>
	</div>
</template>

<script setup>
import { ref } from "vue";
import {
	Search,
	ChatDotSquare,
	Bell,
	Close,
	Refresh,
	ArrowRight
} from "@element-plus/icons-vue";
import Header from "../components/Header.vue";
import BtnBar from "../components/BtnBar.vue";
import BookSwiper from "../components/BookSwiper.vue";
import BookList from "../components/BookList.vue";
import BannerVue from "../components/Banner.vue";
import tipsContent from "../components/tips.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const bookDetails = () => {
	router.push('/book')
}
const hrefTo = () => {
	router.push('/search')
}

const btnList = [
    {
    text: "日常温馨",
    src: "",
    href: "/search"
  },
  {
    text: "西幻",
    src: "",
    href: "/search"
  },
  {
    text: "奇幻",
    src: "",
    href: "/search"
  },
  {
    text: "未来科幻",
    src: "",
    href: "/search"
  },
  {
    text: "重生穿越",
    src: "",
    href: "/search"
  },
  {
    text: "玄幻仙侠武侠",
    src: "",
    href: "/search"
  },
  {
    text: "犯罪悬疑推理",
    src: "",
    href: "/search"
  },
  {
    text: "恐怖惊悚灵异",
    src: "",
    href: "/search"
  },
  {
    text: "青春校园",
    src: "",
    href: "/search"
  },
  {
    text: "现代社会",
    src: "",
    href: "/search"
  },
  {
    text: "古代历史",
    src: "",
    href: "/search"
  },
  {
    text: "近代民国",
    src: "",
    href: "/search"
  },
  {
    text: "其他架空世界观",
    src: "",
    href: "/search"
  }
];

const hotList = ref([
	{
		title: '耽美'
	},
	{
		title: '华文原创'
	},
	{
		title: '耽美'
	},
	{
		title: '耽美'
	},
	{
		title: '耽美'
	}
])

const input1 = ref("");
const currentIndex = ref(null)

const activeName = ref("first");

const showFaleImage = ref(false)
const titleMouse = (index) => {
	showFaleImage.value = true
	currentIndex.value = index
}

const titleMove = (index) => {
	showFaleImage.value = false
}

</script>

<style lang="scss" scoped>
.main-container-box {}

.right-box {
	background-color: white;
	width: 100%;
	margin-left: 20px;
	padding-top: 10px;
}

.shier-left {
	display: inline-flex;
	flex-direction: column;
	font-size: 12px;
	justify-content: space-between;

}

.img-box {
	margin-left: 10px;

	img {
		margin-left: 10px;
		height: 90px;
	}
}

.book-list {
	background-color: white;
	width: 100%;
	margin-top: 20px;
	border-radius: 10px;
	padding: 10px;
}

// .right-box{
// 	background-color: white;
// 	border-radius: 5px;
// 	margin-left: 20px;
// }
.anbao-renqi {
	display: inline-flex;
	justify-content: space-between;
	width: 100%;

}

.shier-yue {
	width: 90%;
	margin-left: 5%;
	background-color: white;
	box-shadow: 0px 2px 3px #e5e5e5;
	padding: 10px;
}

.shier-yue:hover {
	cursor: pointer;
}

.xingzuo-right {
	display: inline-flex;
	justify-content: space-between;
	width: 90%;
	color: #FF8674;
	margin-left: 5%;
}

.left-box {
	background-color: white;
	display: inline-flex;
	flex-direction: column;
	margin-right: 20px;
	height: auto !important;
	width: 100%;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

// .remen-row{
// 	display: inline-flex;
// }
.sousuo-box-boss {
	display: inline-flex;
	width: 35%;
	border: 1px #FF8674 solid;
	color: #FF8674;
	text-align: center;
	border-radius: 5px;
	text-align: center;
	margin-top: 10px;
	margin-left: 10px;
	justify-content: center;
}

.sousuo-box-boss:hover {
	cursor: pointer;
}

.common-layout {
	background: #f7fafc;

}

.main-container {
	max-width: 120rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.card-box {
	background: #fff;
	border-radius: 4px;
	padding: 16px;
}

.common-tit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;

	:deep(.el-button) {
		span {
			gap: 0.5rem;
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 1.5;
			letter-spacing: 0.05em;
			color: #ff8674;
		}
	}

	h3 {
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0.05em;
		color: #2d3748;
	}
}

footer {
	background: #2d3748;
	height: 80px;
	line-height: 80px;

	ul {
		display: flex;
		justify-content: center;
		gap: 20px;

		li {
			a {
				color: #fff;
				font-size: 14px;
			}
		}
	}
}

.match {
	img {
		max-width: 100%;
	}
}

:deep(.el-tabs__nav-wrap:after) {
	display: none;
}

.index-top {
	:deep(.swiper-slide) {
		margin-right: 0 !important;
	}

	:deep(.el-button) {
		border-left: none;
		border-bottom: none;
		border-top: none;
		border-radius: 0;
	}
}

.xinxian-right-title {
	font-size: 0.6rem;
	color: #2d3748;

}

.hehtang-content {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #4a5568;
	background-color: white;

}

.new-commit {
	background-color: #FCFDFE;
}

.mani-content-boss {
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
}

.mani-content {
	padding: 1rem 0.3rem;
	border-radius: 0.1rem;
	align-items: flex-start;
}

.kanzuo-ping {
	color: #FF8674;
	margin-left: 1rem;
}

.hehuang-content {
	margin-top: 1rem;
	font-size: 0.8rem;
}

.yuese-title {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.arrow-png {
	width: 0.8rem;
	margin-left: 0.3rem;
	margin-top: 0.3rem;
}

.new-avg {
	width: 2rem;
	border-radius: 50%;
	margin-right: 1rem;
}

/* 平板设备 */
@media screen and (max-width: 992px) {
  .container {
    width: 90%;
  }
}

/* 移动设备 */
@media screen and (max-width: 768px) {
  .mani-content-boss{
	flex-direction: column;
  }

  .book-item{
	overflow: auto;
  }
}

/* 小屏幕手机 */
@media screen and (max-width: 480px) {
  .container {
    font-size: 14px;
  }

  .book-item{
	overflow: auto;
  }
}

.btn-box{
	margin-left: -10px;
}

.img-list-btn{
	margin-left: 10px !important;
}

/* 移动设备 */
@media screen and (max-width: 768px) {
	.demo-tabs {
		width: 100%;
		margin-left: 0%;
		padding: 20px 0;
		display: inline-flex;
		justify-content: space-between;
	}

	.header-a-page{
		display: none !important;
	}

	.hedewr-phone-riht{
		display: inline-flex;
		justify-content: flex-end;
		align-items: center;
	}
}

/* 小屏幕手机 */
@media screen and (max-width: 480px) {
	.demo-tabs {
		width: 100%;
		margin-left: 0%;
		padding: 20px 0;
		display: inline-flex;
		justify-content: space-between;
	}

	.header-a-page{
		display: none !important;
	}

	.hedewr-phone-riht{
		display: inline-flex;
		justify-content: flex-end;
		align-items: center;
	}
}

</style>